/**
 * 代码评审详情概览页动态组件
 */
import React from 'react';
import { Balloon } from '@teamix/ui';
import utils from 'utils/index';
import TextAvatar from '@txdfe/at-text-avatar';
import CommonComment from './commonComment';
import InlineComment from './inlineComment';
import './index.scss';
import intl from '../../../../../../../../../../locale';

export default class CodeReviewLogMedia extends React.Component {
  renderContent = (isCommonComment) => {
    if (isCommonComment) {
      return <CommonComment {...this.props} />;
    }
    return <InlineComment {...this.props} getLineInfo={this.getLineInfo} />;
  };

  getLineInfo = (firstNote) => {
    // 特别处理: 接口返回数据无side，从评论中找到对应id的side，否则side不对，在log中回复的，在文件中不显示
    const { inline_comments } = this.props.changesReducer;
    const parentComment = inline_comments.find((item) => item.id === firstNote.id) || {};
    const side = parentComment.side || 'right';
    const { line, range_context, closed, id } = parentComment;
    let to_commit = '';
    let from_commit = '';
    if (range_context) {
      [from_commit, to_commit] = range_context.split(' ');
    }
    return {
      side,
      line,
      to_commit,
      from_commit,
      closed,
      id,
    };
  };

  renderTitle = (isCommonComment) => {
    const { log } = this.props;
    if (isCommonComment) {
      return (
        <span>
          {intl.get({
            id: 'code-assets.logs.comment.OverallCommentsReleased',
            defaultMessage: '发布了整体评论',
          })}
        </span>
      );
    }

    return (
      <span>
        {log.avatarType === 'BOT'
          ? intl.get({
              id: 'code-assets.logs.comment.IssuesFoundCommented',
              defaultMessage: '发现的问题被评论',
            })
          : intl.get({
              id: 'code-assets.logs.comment.PublishedComments',
              defaultMessage: '发布了评论',
            })}
      </span>
    );
  };

  render() {
    const { log } = this.props;
    const noteData = [...log.noteData];
    const firstData = noteData[0];
    const firstNote = firstData.noteList[0];
    const isYundouComment = log.avatarType === 'BOT';
    // 整体评论无行号、云豆回复只有行内
    const isCommonComment = !firstNote.line_code && !isYundouComment;
    const yundouAuthor = {
      name: intl.get({ id: 'code-assets.logs.comment.KidneyBeans', defaultMessage: '云豆' }),
      avatar_url: 'https://img.alicdn.com/tfs/TB1WYSpIQL0gK0jSZFtXXXQCXXa-400-401.png',
    };

    return (
      <>
        <div className="log-item-title has-pb" style={{ paddingBottom: 12 }}>
          <div className="log-item-title-info">
            <div className="log-item-title-author mr0">
              <Balloon.Tooltip
                align="t"
                trigger={
                  <TextAvatar
                    image={isYundouComment ? yundouAuthor.avatar_url : firstNote.author_avatar_url}
                    text={isYundouComment ? yundouAuthor.name : firstNote.author_name}
                    needAddedText
                    size="xs"
                  />
                }
                text={isYundouComment ? yundouAuthor.name : firstNote.author_name}
              />
            </div>
            &nbsp;
            <div className="note-content-wrapper">
              {this.renderTitle(isCommonComment, firstNote)}
            </div>
          </div>
          <div className="log-item-title-time">
            {utils.getBeautyTime(
              log.avatarType === 'BOT' && firstData.issue
                ? firstData.issue.intro_time
                : firstNote.created_at,
            )}
          </div>
        </div>
        <div className="log-item-detail">{this.renderContent(isCommonComment)}</div>
      </>
    );
  }
}
